<template>
  <div>
    <van-nav-bar title="商品发布" class="title" @click-left="onClickLeft">
      <template #left>
        <button class="left-text">返回</button>
      </template>
    </van-nav-bar>

    <van-form @submit="onSubmit">
      <van-field
            v-model="user.id"
            type="number"
            name="ID"
            label="ID"
            placeholder="ID"
            :rules="[{ require: true, message: '请填写ID' }]"
      />
      <van-field
        v-model="user.title"
        name="标题"
        label="标题"
        placeholder="标题"
        :rules="[{ required: true, message: '请填写标题' }]"
      />
      <van-field
        v-model="user.yourprice"
        type="number"
        name="价格"
        label="价格"
        placeholder="价格"
        :rules="[{ required: true, message: '请填写年龄' }]"
      />

    
      <van-field
        readonly
        clickable
        name="calendar"
        :value="user.birthday"
        label="日期"
        placeholder="点击选择日期"
        @click="showCalendar = true"
      />
      <van-calendar v-model="showCalendar" @confirm="onConfirmBir" />
      <van-field
        v-model="user.message"
        rows="2"
        autosize
        label="内容"
        type="textarea"
        maxlength="100"
        placeholder="请输入留言"
        show-word-limit
      />
      <van-field name="uploader" label="照片上传">
        <template #input>
          <van-uploader v-model="uploader" :after-read="afterRead" />
        </template>
      </van-field>

      <div class="but" style="text-align: center">
        <button round block type="info" native-type="submit">提交</button>
      </div>
    </van-form>
  </div>
</template>
 
<script>
import axios from "axios";
import { Toast } from "vant";

export default {
  data() {
    return {
      user: {
        id: NaN,
        name: "",
        yourprice: NaN,
        birthday: "",
        message: "",
        icon: "",
      },
      uploader: [],
      showPicker: false,
      showCalendar: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      console.log("submit", values);
      axios
        .post("/api/shandadd.php", {
          id: this.user.id,
          title: this.user.title,
          yourprice: this.user.yourprice,
          create_time: this.user.birthday,
          message: this.user.message,
          icon: this.user.icon,
        })
        .then((response) => {
          console.log(response);
          Toast.success("添加成功");
          history.go(-1);
        });
    },
    onConfirm(value) {
      this.showPicker = false;
    },
    onConfirmBir(date) {
      this.user.birthday = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.showCalendar = false;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      const formDate = new FormData();
      formDate.append("image", file.file, file.file.name);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios
        .post("/api/upload.php", formDate, config)
        .then((res) => {
          console.log(res);
          this.user.icon = res.data.data.src
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.title {
  background: rgb(24, 154, 100);
  
}
>>>.van-nav-bar__title {
  font-size: 18px;
  color: rgb(255, 255, 255);
}
.left-text{
  background: rgb(24, 154, 100);
  border: 1px solid rgb(24, 154, 100);
  color:white;
  

}
.but button {
  width: 70%;
  background: rgb(24, 154, 100);
  height: 40px;
  border-radius: 6%;
  border: 1px solid white;
  color: white;
}
</style>